<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>Vue-router</title>
	<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>  
</head>
<body>
<div id="app8">
    <h1>vue-router HTML5 History 模式</h1>
  
    <p>{{ message}}</p> 
    <p><span style='color:red;'>vue路由设置了html5 history模式后，直接访问页面时是返回错的，毕竟vue router设置的路径不是真实存在的路径</span></p>
    <p>使用history模式去掉#号 必须配合后端 详见: <a href="http://router.vuejs.org/zh-cn/essentials/history-mode.html" target="_blank">http://router.vuejs.org/zh-cn/essentials/history-mode.html</a></p>
       <router-link :to="{ name : 'mylbf' }">HTML5 History 模式</router-link>
      <router-view></router-view>
</div>
</body>
<script>
const luyou8 = new VueRouter({
	mode: "history",
	routes : [
	      {
	        path : "/mylbf",
	        name : "mylbf",
	        components: {
	        	default : {
	        		template : "<div>123123123123</div>"
	        	}
	        }
	      }
	 ]	
});


new Vue({
	el : "#app8", 
	router : luyou8,
	data : {
		message  : "HTML5 History 模式"
	}
	
});

</script>
</html>